<template>
  <div class="small-main">
    <div v-if="debris.debris1" class="debris debris1">
      <img :src="debrisImg.debrisImg1" alt="" />
      <div v-if="debris.debris1 > 1" class="tag">{{ debris.debris1 }}</div>
    </div>
    <div v-if="debris.debris2" class="debris debris2">
      <img :src="debrisImg.debrisImg2" alt="" />
      <div v-if="debris.debris2 > 1" class="tag">{{ debris.debris2 }}</div>
    </div>
    <div v-if="debris.debris3" class="debris debris3">
      <img :src="debrisImg.debrisImg3" alt="" />
      <div v-if="debris.debris3 > 1" class="tag">{{ debris.debris3 }}</div>
    </div>
    <div v-if="debris.debris4" class="debris debris4">
      <img :src="debrisImg.debrisImg4" alt="" />
      <div v-if="debris.debris4 > 1" class="tag">{{ debris.debris4 }}</div>
    </div>
    <div v-if="debris.debris5" class="debris debris5">
      <img :src="debrisImg.debrisImg5" alt="" />
      <div v-if="debris.debris5 > 1" class="tag">{{ debris.debris5 }}</div>
    </div>
    <div v-if="debris.debris6" class="debris debris6">
      <img :src="debrisImg.debrisImg6" alt="" />
      <div v-if="debris.debris6 > 1" class="tag">{{ debris.debris6 }}</div>
    </div>
    <div v-if="debris.debris7" class="debris debris7">
      <img :src="debrisImg.debrisImg7" alt="" />
      <div v-if="debris.debris7 > 1" class="tag">{{ debris.debris7 }}</div>
    </div>
    <div v-if="debris.debris8" class="debris debris8">
      <img :src="debrisImg.debrisImg8" alt="" />
      <div v-if="debris.debris8 > 1" class="tag">{{ debris.debris8 }}</div>
    </div>
    <div v-if="debris.debris9" class="debris debris9">
      <img :src="debrisImg.debrisImg9" alt="" />
      <div v-if="debris.debris9 > 1" class="tag">{{ debris.debris9 }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
// 城堡
import castle1 from '@/assets/childrenDay/puzzle/castle/1.png'
import castle2 from '@/assets/childrenDay/puzzle/castle/2.png'
import castle3 from '@/assets/childrenDay/puzzle/castle/3.png'
import castle4 from '@/assets/childrenDay/puzzle/castle/4.png'
import castle5 from '@/assets/childrenDay/puzzle/castle/5.png'
import castle6 from '@/assets/childrenDay/puzzle/castle/6.png'
import castle7 from '@/assets/childrenDay/puzzle/castle/7.png'
import castle8 from '@/assets/childrenDay/puzzle/castle/8.png'
import castle9 from '@/assets/childrenDay/puzzle/castle/9.png'
// 木马
import horse1 from '@/assets/childrenDay/puzzle/horse/1.png'
import horse2 from '@/assets/childrenDay/puzzle/horse/2.png'
import horse3 from '@/assets/childrenDay/puzzle/horse/3.png'
import horse4 from '@/assets/childrenDay/puzzle/horse/4.png'
import horse5 from '@/assets/childrenDay/puzzle/horse/5.png'
import horse6 from '@/assets/childrenDay/puzzle/horse/6.png'
import horse7 from '@/assets/childrenDay/puzzle/horse/7.png'
import horse8 from '@/assets/childrenDay/puzzle/horse/8.png'
import horse9 from '@/assets/childrenDay/puzzle/horse/9.png'
// 飞屋
import house1 from '@/assets/childrenDay/puzzle/house/1.png'
import house2 from '@/assets/childrenDay/puzzle/house/2.png'
import house3 from '@/assets/childrenDay/puzzle/house/3.png'
import house4 from '@/assets/childrenDay/puzzle/house/4.png'
import house5 from '@/assets/childrenDay/puzzle/house/5.png'
import house6 from '@/assets/childrenDay/puzzle/house/6.png'
import house7 from '@/assets/childrenDay/puzzle/house/7.png'
import house8 from '@/assets/childrenDay/puzzle/house/8.png'
import house9 from '@/assets/childrenDay/puzzle/house/9.png'

// 控制拼图与拼图数量显示隐藏 0 隐藏 1显示拼图 大于1显示拼图并且显示拼图数量tag
const debris = ref({
  debris1: 0,
  debris2: 0,
  debris3: 0,
  debris4: 0,
  debris5: 0,
  debris6: 0,
  debris7: 0,
  debris8: 0,
  debris9: 0,
})

const castle = ref({
  castle1: castle1,
  castle2: castle2,
  castle3: castle3,
  castle4: castle4,
  castle5: castle5,
  castle6: castle6,
  castle7: castle7,
  castle8: castle8,
  castle9: castle9,
})
const horse = ref({
  horse1: horse1,
  horse2: horse2,
  horse3: horse3,
  horse4: horse4,
  horse5: horse5,
  horse6: horse6,
  horse7: horse7,
  horse8: horse8,
  horse9: horse9,
})
const house = ref({
  house1: house1,
  house2: house2,
  house3: house3,
  house4: house4,
  house5: house5,
  house6: house6,
  house7: house7,
  house8: house8,
  house9: house9,
})

// 拼图碎片底图
const debrisImg = ref({
  debrisImg1: castle.value.castle1,
  debrisImg2: castle.value.castle2,
  debrisImg3: castle.value.castle3,
  debrisImg4: castle.value.castle4,
  debrisImg5: castle.value.castle5,
  debrisImg6: castle.value.castle6,
  debrisImg7: castle.value.castle7,
  debrisImg8: castle.value.castle8,
  debrisImg9: castle.value.castle9,
})

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})

// 碎片底图匹配
const debrisMatching = (value) => {
  let index = 1
  for (const i in debrisImg.value) {
    if (value === 'castle') {
      debrisImg.value[i] = castle.value[`castle${index}`]
    } else if (value === 'horse') {
      debrisImg.value[i] = horse.value[`horse${index}`]
    } else if (value === 'house') {
      debrisImg.value[i] = house.value[`house${index}`]
    }
    index++
  }
}

// 拼图碎片显示隐藏匹配逻辑
watch(
  () => props.data,
  (value) => {
    let text = ''
    if (props.data.current_puzzle.last_puzzle_no === 1) {
      text = 'castle'
    } else if (props.data.current_puzzle.last_puzzle_no === 2) {
      text = 'horse'
    } else if (props.data.current_puzzle.last_puzzle_no === 3) {
      text = 'house'
    }
    debrisMatching(text)
    for (const i in debris.value) {
      let temp = ''
      if (i.length > 7) {
        temp = i.substr(6, 2)
      } else {
        temp = i.substr(6, 1)
      }
      temp = parseInt(temp)
      for (let j = 0; j < props.data.puzzle_pieces.length; j++) {
        if (props.data.puzzle_pieces[j].no === temp) {
          debris.value[i] = props.data.puzzle_pieces[j].num
        }
      }
    }
  },
  { deep: true, immediate: true }
)
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
